<template>
  <div>
    <div class="bjtk">
      <div class="bjtk_list">
        <!-- <div class="head">
          <h2></h2>
          <a-button class="editable-add-btn" @click="close">
            <a-icon type="close" />
          </a-button>
        </div>-->
        <div class="close" @click="close">
          <a-icon type="close" />
        </div>
        <div class="bj" v-if="isShow">
          <div class="list_hed">
            <span>
              <a-icon type="team" style="font-size:22px;" />
            </span>
            <span class="span">
              <span class="tit">联系人：</span>
              {{ lxr }}
            </span>
            <span class="span">
              <span class="tit">手机号：</span>
              {{ phone }}
            </span>
          </div>
          <div class="list list_tit">
            <span>所属客户：</span>
            <!-- <a-button type="primary" @click="glkh">+关联客户</a-button> -->
          </div>
          <div class="gjls_box" style>
            <div class="gjlist" v-for="(glkh, i) in glkhList" :key="i">
              <div class="left_tit">
                <span class="span">{{ glkh.dwmc }}</span>
                <span class="span">
                  <span class="tit">客户余额：</span>
                  {{ glkh.KHYE }}
                </span>
              </div>
              <div class="cz">
                <a-popconfirm title="确定解除关联吗?" @confirm="() => jcgl(i)">
                  <a href="javascript:;">解除关联</a>
                </a-popconfirm>
              </div>
            </div>
          </div>
          <div class="list">
            <span></span>
            <a-button type="primary" @click="glkh">+关联客户</a-button>
          </div>
          <!-- <div class="zt_list">
            <p class="zt_tit">状态：</p>
            <p class="flex">
              <span>是否绑定微信?</span>
              <span>未绑定</span>
            </p>
          </div>-->
        </div>
        <div class="bj check_box" v-if="isGlShow">
          <div class="list">
            <!-- <a-button @click="canclick">返回</a-button> -->
            <a-input
              @change="ongsmcdmSearch"
              v-model="filed"
              allowClear
              style="width: 300px"
              placeholder="请输入公司名称或代码"
            />
          </div>
          <div class="gjls_check_box">
            <div class="gjlist">
              <a-checkbox-group @change="onAllGLchange">
                <a-row>
                  <a-col :span="24" v-for="(allgl, i) in AllglkhList" :key="i">
                    <a-checkbox :disabled="allgl.checked" :value="allgl">
                      <div class="check_list">
                        <span class="span">{{allgl.DWMC}}</span>
                        <!-- <span> -->
                        <span class="span"><span class="tit">任务人：</span>{{allgl.RWR}}</span>
                        <span class="span"><span class="tit">余额：</span>{{allgl.KHYE}}</span>
                        <!-- </span> -->
                      </div>
                    </a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </div>
          </div>
          <div class="list_btn">
            <a-button @click="clearChecked">返回</a-button>
            <a-button type="primary" @click="SaveGl()">提交并保存</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import moment from "moment";
import smtgltk from "./smtgltk";
export default {
  props: ["record"],
  data() {
    return {
      moment,
      // 跳转携带参数信息
      xsdinfo: "",
      // 销售单号
      xsdh: "",
      // 单位名称
      dwmc: "",
      // 公司编码
      gsbm: "",
      // 授权id
      sqdwid: "",
      //数据库名称
      database: "ERP2_BEARING",
      // ip地址
      ip: "122.112.240.180",
      lxr: "",
      phone: "",
      // 关联客户列表
      glkhList: [],
      // 控制列表详情显示
      isShow: true,
      // 控制关联列表
      isGlShow: false,
      //从session中拿rwrall
      rwrall: "",
      // 关联客户列表搜索值
      filed: "",
      // 所有关联客户数组
      AllglkhList: [],
      value: [],
      // 删除lxrid
      lxrid: "",
      //关联数据
      gldata: [],
      check_data: []
    };
  },

  methods: {
    //关闭弹出框
    close() {
      this.$store.state.tjwz = false;
    },
    // 搜索公司名称或代码触发
    ongsmcdmSearch(e) {
      this.filed = e.target.value;
      // if (this.timer) {
      //   clearTimeout(this.timer);
      // }
      // this.timer = setTimeout(() => {
      // console.log("防抖...");
      this.getAllglkhList();
      //   this.timer = undefined;
      // }, 500);
    },
    // 关联客户
    glkh() {
      this.isShow = false;
      this.isGlShow = true;
      this.getAllglkhList();
    },
    // 解除关联
    jcgl(i) {
      this.lxrid = this.glkhList[i].lxrid;
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newLxrDelete.php",
          qs.stringify({
            id_num: this.lxrid,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.$message.success("解除成功");
            this.getlxrDetail();
          }
          console.log(this.glkhList);
        });
    },
    // 清空多选
    clearChecked() {
      this.check_data = [];
      this.gldata = [];
      // console.log(this.gldata);
      // this.onAllGLchange(this.check_data,'clear')
      // this.getAllglkhList();
      this.canclick();
    },
    // 多选触发
    onAllGLchange(e, clear) {
      console.log(e);

      this.gldata = [];
      this.check_data = e;
      console.log(this.check_data);

      // let gldata = [];

      if (this.check_data.length < 3) {
        for (var i = 0; i < this.AllglkhList.length; i++) {
          for (var j = 0; j < this.check_data.length; j++) {
            this.AllglkhList[i].checked = false;
          }
        }
      } else {
        this.$message.error("最多选3家");
        console.log(this.check_data);
        for (var i = 0; i < this.AllglkhList.length; i++) {
          for (var j = 0; j < this.check_data.length; j++) {
            if (this.AllglkhList[i].id == this.check_data[j].id) {
              this.AllglkhList[i].checked = false;
              break;
            }
            if (this.AllglkhList[i].id != this.check_data[j].id) {
              this.AllglkhList[i].checked = true;
            }
          }
          this.AllglkhList = this.AllglkhList;
        }
      }
    },
    // 保存关联
    SaveGl() {
      for (var j = 0; j < this.check_data.length; j++) {
        this.gldata.push(this.check_data[j].DWMC);
      }
      this.gldata = this.gldata.join("|");
      console.log(this.gldata);

      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newLxrAdds.php",
          qs.stringify({
            dwmcs: this.gldata,
            lxr: this.lxr,
            lxdh: this.lxdh,
            phone: this.phone,
            gsbm: this.gsbm,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.$message.success("关联成功");
            this.isGlShow = false;
            this.isShow = true;
            this.getlxrDetail();
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    // 获取当前公司关联列表
    getlxrDetail() {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newLxrListDetail.php",
          qs.stringify({
            gsbm: this.gsbm,
            lxr: this.lxr,
            phone: this.phone,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            this.glkhList = res.data.result;
          } else {
            this.glkhList = [];
          }
        });
    },
    // 获取所有关联客户列表
    getAllglkhList() {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newLxrSelectKh.php",
          qs.stringify({
            rwrall: this.rwrall,
            gsbm: this.gsbm,
            filed: this.filed,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            for (var i = 0; i < res.data.result.length; i++) {
              res.data.result[i].checked = false;
              res.data.result[i].id = i;
            }
            this.AllglkhList = res.data.result;
            console.log(this.AllglkhList);
          } else {
            this.AllglkhList = [];
          }
        });
    },
    canclick() {
      this.isShow = true;
      this.isGlShow = false;
    }
  },
  created() {
    this.rwrall = Array(sessionStorage.getItem("xsuser"));
    this.lxr = this.record.lxr;
    this.phone = this.record.phone;
    this.gsbm = sessionStorage.getItem("gsbm");
    this.getlxrDetail();
  }
};
</script>

<style lang='less' scoped>
.bjtk {
  position: absolute;
  z-index: 9999;
  width: 55%;
  height: 600px;
  // overflow-y: scroll;
  background-color: #fff;
  text-align: center;
  padding: 50px 50px 20px;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);

  .bjtk_list {
    .head {
      display: flex;
      justify-content: space-between;
    }

    .bj {
      .ts {
        margin: 5px 0 0 75px;
        color: red;
        font-size: 12px;
        i {
          margin: 0 5px;
        }
      }
      .sele {
        position: relative;
        text-align: left;
        /deep/ .ant-select-auto-complete.ant-select .ant-input {
          height: 32px !important;
        }
        /deep/ .ant-select-selection__clear {
          right: 50px !important;
        }
        .ant-btn-lg {
          height: 32px !important;
        }
        .search {
          position: absolute;
          top: 8px;
          right: 120px;
          font-size: 18px;
        }
      }
      .list {
        margin: 20px 0;
        text-align: left;
        display: flex;
        justify-content: space-between;
        .gjxq_area {
          width: 280px;
          vertical-align: text-top;
          min-height: 70px;
        }
        .cz_btn {
          display: block;
          width: 25%;
        }
        .tit {
          display: inline-block;
          width: 80px;
          text-align: right;

          i {
            color: #ff0000;
            padding: 0 4px;
          }
        }

        .radio {
          margin-left: 10px;
        }

        .text {
          width: 288px;
          vertical-align: top;
        }
      }
      .list_tit {
        background: #f1f1f1;
        padding: 0 10px;
        line-height: 40px;
        margin: 0;
      }
      .list_hed {
        text-align: left;
        // box-shadow: 0 0 5px #ccc;
        padding: 12px;
        border-radius: 10px;
        margin-top: 20px;
        .span {
          margin-right: 20px;
        }
        .tit {
          color: #999;
        }
      }
      .zt_list {
        display: block;
        line-height: 38px;
        .zt_tit {
          // background: #f1f1f1;
        }

        p {
          height: 20px;
          text-align: left;
        }
        .flex {
          display: flex;
          justify-content: space-between;
        }
      }
      .img_list {
        margin: 20px 0;
        margin-left: 90px;
        overflow: hidden;
      }
      .bcloading {
        position: relative;
        left: 42%;
        bottom: 214px;
      }
      .list_btn {
        text-align: center;

        button {
          width: 100px;
          height: 40px;
          margin: 0 20px;
        }
      }
    }
    .check_box {
      .list {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        margin: 20px 0;

        // padding-right: 60px;
      }
    }
  }
}
.gjls_check_box {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 360px;

  .gjlist {
    .check_list {
      vertical-align: top;
      margin-left: 20px;
      display: flex;
      justify-content: space-between;
      .span {
        margin-right: 20px;
        display: inline-block;
        width: 220px;
        // text-align: center;
      }
      .tit{
        margin-right: 10px;
        color: #999;
      }
    }
    .check_thead {
      span {
        width: 220px;
        height: 30px;
        display: inline-block;
      }
      span:nth-of-type(1) {
        width: 16px;
      }
    }
    .ant-checkbox-group {
      width: 100%;
    }
    label {
      width: 100%;
      display: flex;
      padding: 10px 0;
      align-items: center;
      border-bottom: 1px solid #f1f1f1;
      text-align: left;
      .span {
        margin-right: 20px;
      }
    }
  }
}
.gjls_box {
  overflow-y: scroll;
  max-height: 300px;
  .gjlist {
    text-align: left;
    // padding-left: 50px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    border-bottom: 1px solid #f1f1f1;
    p {
      margin: 0;
    }
    .left_tit {
      .span {
        display: inline-block;
        width: 240px;
        padding: 0 10px;
      }
      .tit {
        color: #999;
      }
    }
    .cz {
      width: 20%;
      text-align: right;
    }
  }
}
</style>
